<template>
  <!-- blog+版心 -->
  <div class="pc-home-blog" v-if="!isphone">
    <div class="blog main">
      <!-- 样式盒子 -->
      <div class="container">
        <!-- flex盒子 -->
        <div class="row">
          <!-- 博客左 -->
          <div class="blog_left">
            <!-- 博客左主题 -->
            <div class="blog_left_top">
              <h1>博客</h1>
            </div>
            <!-- 博客左的flex盒子 -->
            <div class="row">
              <!-- 盒子 -->
              <div
                class="blog_left_row"
                v-for="item in bloglist"
                :key="item.id"
              >
                <!-- 盒子上部图片 -->
                <div class="blog_thumb">
                  <img :src="item.img" alt="" />
                </div>
                <!-- 盒子内容 -->
                <div class="blog_content">
                  <h3>{{ item.author }}</h3>
                  <div class="blog_meta">
                    <span class="blog_id"
                      >摘要 : <a href="#">{{ item.author }}</a> /</span
                    >
                    <span class="blog_time"
                      >时间 : <a href="#">2022/7/5</a></span
                    >
                  </div>
                  <div class="blog_desc">
                    <p>
                      {{ item.content }}
                    </p>
                  </div>
                  <el-row> </el-row>
                </div>
                <el-row>
                  <el-button
                    type="primary"
                    class="button"
                    @click="toBlogList(item.id)"
                    >点击进入</el-button
                  >
                </el-row>
              </div>
            </div>
          </div>
          <!-- 博客右 -->
          <div class="blog_right">
            <div class="blog_right_top">
              <!-- 搜索框 -->
              <div class="blog_right_search">
                <h3>搜索</h3>
                <el-input
                  :v-model="input"
                  placeholder="请输入内容"
                  class="el-input"
                ></el-input>
                <el-row>
                  <el-button type="primary" class="button">主要按钮</el-button>
                </el-row>
              </div>
              <!-- 评论 -->
              <div class="blog_right_comment">
                <h3>最近-评论</h3>
                <div
                  class="comment_row"
                  v-for="item in blogcomment"
                  :key="item.id"
                  v-infinite-scroll="load"
                >
                  <div class="comment_thumb">
                    <img :src="item.img" />
                  </div>
                  <div class="comment_info">
                    <h3>{{ item.email }}</h3>
                    <span>{{ item.content }}</span>
                  </div>
                </div>
                <!-- <van-loading size="12" v-if="isloading">加载中...</van-loading>
                <button class="more" v-else @click="getMore">{{ hasMore ? "我也是有底线的" : "加载更多" }}</button> -->
              </div>
              <!-- 帖子 -->
              <div class="blog_right_post">
                <h3>最近-帖子</h3>
                <div class="post_row" v-for="item in bloglist" :key="item.id">
                  <div class="post_thumb">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="post_info">
                    <h3>{{ item.author }}</h3>
                    <span>{{ item.content }}</span>
                  </div>
                  <div class="comment_info"></div>
                </div>
                <!-- 档案 -->
                <div class="blog_right_archives">
                  <h3>档案</h3>
                  <h4>我与毒赌不共戴天公司</h4>
                  <div class="archives_row">
                    <div class="archives_thumb">
                      <img
                        src="../../assets/images/-1326731245_1359399176_94025146.png"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 种类 -->
              <div class="blog_right_categories">
                <h3>种类</h3>
                <ul>
                  <li>
                    <a href="#">穗穗穗穗穗穗</a>
                  </li>
                  <li>
                    <a href="#">石石石石石石</a>
                  </li>
                  <li>
                    <a href="#">众众众众众众</a>
                  </li>
                  <li>
                    <a href="#">邓邓邓邓邓邓</a>
                  </li>
                  <li>
                    <a href="#">江江江江江江</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="phone-home">
    <div class="bloglist">
      <div
        class="blogitem"
        @click="goblog(item.id)"
        v-for="item in bloglist"
        :key="item.id"
      >
        <div class="blogimg">
          <img v-lazy="item.img" alt="" />
        </div>
        <div class="text">
          <h2>
            {{ item.title }}
          </h2>
          <p>
            {{ item.content }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getblog } from '@/api';
import { mapState } from 'vuex';
import { getComment } from '@/api';
export default {
  data() {
    return {
      input: '',
      bloglist: [],
      blogcomment: [],
      index: 0,
      isLoding: false,
    };
  },

  methods: {
    toBlogList(id) {
      this.$router.push('/bloglist/' + id);
      console.log(id);
    },
    async getComment() {
      const res = await getComment();
      this.blogcomment = res.data.data;
    },
    goblog(id) {
      this.$router.push('/blogcontent/' + id);
      console.log(id);
    },
    load() {
      this.index += 5;
    },
    getMore() {
      this.isloading = true;
      setTimeout(async () => {
        await this.getComments();
        this.isloading = false;
      }, 500);
    },
  },
  computed: {
    // 取出media中的isphone 其他页面按此方法取值
    // isphone为true时，手机端模板，否则网页端模板
    ...mapState('media', ['isphone']),
  },
  created() {
    this.getComment();
    getblog().then((res) => {
      this.bloglist = res.data.data;
      console.log(this.bloglist);
    });
  },
};
</script>

<style lang="scss" scoped>
// 版心
.pc-home-blog {
  .main {
    width: 1200px;
    margin: 0 auto;
  }

  // 博客
  .blog {
    margin-top: 60px;

    // 博客样式盒子
    .container {
      // 博客flex盒子
      .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x) * -0.5);
        margin-left: calc(var(--bs-gutter-x) * -0.5);

        // 博客左
        .blog_left {
          flex: 0 0 auto;
          width: 75%;

          // 博客左top
          .blog_left_top {
            h1 {
              text-align: center;
              font-size: 42px;
              line-height: 38px;
              margin-bottom: 0;
              font-weight: 500;
              margin-bottom: 40px;
            }
          }

          // 博客左的flex盒子
          .row {
            // --bs-gutter-x: 1.5rem;
            width: 100%;
            --bs-gutter-y: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: calc(var(--bs-gutter-y) * -1);
            margin-right: calc(var(--bs-gutter-x) * -0.5);
            margin-left: calc(var(--bs-gutter-x) * -0.5);

            .blog_left_row {
              flex: 0 0 auto;
              width: 48%;
              margin-bottom: 50px;

              // 博客左盒子的头部图片
              .blog_thumb {
                img {
                  max-width: 100%;
                  height: auto;
                }
              }

              // 博客左盒子的内容
              .blog_content {
                // 头文字
                h3 {
                  font-size: 18px;
                  line-height: 22px;
                  font-weight: 500;
                  padding: 0;
                  margin-bottom: 2px;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 博客
.pc-home {
  .blog {
    margin-top: 60px;

    // 博客样式盒子
    .container {
      // 博客flex盒子
      .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x) * -0.5);
        margin-left: calc(var(--bs-gutter-x) * -0.5);

        // 博客左
        .blog_left {
          flex: 0 0 auto;
          width: 75%;

          // 博客左top
          .blog_left_top {
            h1 {
              text-align: center;
              font-size: 42px;
              line-height: 38px;
              margin-bottom: 0;
              font-weight: 500;
              margin-bottom: 40px;
            }
          }

          // 博客左的flex盒子
          .row {
            // --bs-gutter-x: 1.5rem;
            width: 100%;
            --bs-gutter-y: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: calc(var(--bs-gutter-y) * -1);
            margin-right: calc(var(--bs-gutter-x) * -0.5);
            margin-left: calc(var(--bs-gutter-x) * -0.5);

            .blog_left_row {
              flex: 0 0 auto;
              width: 48%;
              margin-bottom: 50px;

              // 博客左盒子的头部图片
              .blog_thumb {
                width: 440px;
                height: 440px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              // 博客左盒子的内容
              .blog_content {
                // 头文字
                h3 {
                  font-size: 18px;
                  line-height: 22px;
                  font-weight: 500;
                  padding: 0;
                  margin-bottom: 2px;
                }

                // 中间文字
                .blog_desc {
                  height: 100px;
                  width: 100%;
                  overflow: hidden;
                }

                .blog_meta {
                  margin-bottom: 17px;

                  .blog_id {
                    margin-right: 8px;
                    font-size: 14px;
                    line-height: 24px;

                    a {
                      margin-right: 5px;
                      color: #0063d1;
                    }
                  }

                  .blog_time {
                    margin-left: 8px;
                    font-size: 14px;
                    line-height: 24px;

                    a {
                      margin-left: 5px;
                      color: #0063d1;
                    }
                  }
                }

                // 底部文字
                .blog_desc {
                  margin-bottom: 25px;

                  p {
                    font-size: 14px;
                    line-height: 24px;
                    margin-bottom: 0;
                  }
                }

                .button {
                  background: #0063d1;
                  max-width: 170px;
                  width: 150px;
                }
              }
            }
          }
        }

        // 博客右
        .blog_right {
          flex: 0 0 auto;
          width: 25%;

          // 大盒字样式
          .blog_right_top {
            background: #f8f8f8;
            border: 1px solid #ebebeb;
            padding: 57px 20px 54px 20px;
            border-radius: 4px;

            // 搜索框
            .blog_right_search {
              margin-bottom: 56px;

              h3 {
                font-size: 18px;
                line-height: 20px;
                font-weight: 500;
                margin-bottom: 20px;
              }

              .el-input {
                margin-bottom: 20px;
              }
            }

            // 评论
            .blog_right_comment {
              margin-bottom: 56px;

              h3 {
                font-size: 18px;
                line-height: 20px;
                font-weight: 500;
                margin-bottom: 20px;
              }

              .comment_row {
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding-bottom: 15px;
                border-bottom: 1px solid #ddd;
                margin-bottom: 15px;

                .comment_thumb {
                  height: 55px;
                  width: 55px;
                  float: left;
                  margin-right: 10px;
                  border-radius: 27.5px;
                  overflow: hidden;

                  img {
                    height: 100%;
                    width: 100%;
                  }
                }

                .comment_info {
                  h3 {
                    font-size: 13px;
                    font-weight: 500;
                    text-transform: capitalize;
                    line-height: 14px;
                    margin-bottom: 5px;
                  }

                  span {
                    font-size: 12px;
                  }
                }
              }
            }

            // 帖子
            .blog_right_post {
              margin-bottom: 56px;

              h3 {
                font-size: 18px;
                line-height: 20px;
                font-weight: 500;
                margin-bottom: 20px;
              }

              .post_row {
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding-bottom: 15px;
                border-bottom: 1px solid #ddd;
                margin-bottom: 15px;

                .post_thumb {
                  width: 55px;
                  height: 55px;
                  float: left;
                  margin-right: 10px;

                  img {
                    height: 100%;
                    width: 100%;
                  }
                }

                .post_info {
                  width: 180px;
                  height: 60px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;

                  h3 {
                    font-size: 13px;
                    font-weight: 500;
                    text-transform: capitalize;
                    line-height: 14px;
                    margin-bottom: 5px;
                  }

                  span {
                    font-size: 12px;
                  }
                }
              }
            }

            // 档案
            .blog_right_archives {
              margin-bottom: 56px;

              h3 {
                font-size: 18px;
                line-height: 20px;
                font-weight: 500;
                margin-bottom: 20px;
              }

              .archives_row {
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding-bottom: 15px;
                border-bottom: 1px solid #ddd;
                margin-bottom: 15px;

                .archives_thumb {
                  width: 100px;
                  height: 150px;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }

                .archives_info {
                  font-size: 13px;
                  font-weight: 500;
                  text-transform: capitalize;
                  line-height: 14px;
                  margin-bottom: 5px;
                }
              }
            }

            // 种类
            .blog_right_categories {
              margin-bottom: 56px;

              h3 {
                font-size: 18px;
                line-height: 20px;
                font-weight: 500;
                margin-bottom: 20px;
              }

              ul {
                list-style: outside none none;
                margin: 0;
                padding: 0;

                li {
                  border-bottom: 1px solid #ebebeb;

                  a {
                    font-size: 14px;
                    display: block;
                    line-height: 25px;
                    padding: 10px 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.phone-home {
  margin-top: 50px;

  .bloglist {
    border-top: 1px solid transparent;
    margin-top: 20px;
    width: 100%;
    min-height: 700px;
    background-color: white;

    .blogitem:nth-child(1) {
      .text {
        h2 {
          color: red;
        }
      }
    }

    .blogitem:nth-child(2) {
      .text {
        h2 {
          color: orangered;
        }
      }
    }

    .blogitem:nth-child(3) {
      .text {
        h2 {
          color: orange;
        }
      }
    }

    .blogitem {
      background-color: #ececec;
      width: 95%;
      height: 100px;
      margin: 10px auto;
      border-radius: 10px;
      display: flex;
      align-items: center;

      .blogimg {
        img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
      }

      .text {
        margin-left: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        h2 {
          color: black;
          overflow: hidden; //溢出隐藏
          white-space: nowrap; //禁止换行
          text-overflow: ellipsis; //...
        }

        p {
          font-size: 14px;
          color: black;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-align: left;
        }
      }
    }
  }
}
</style>
